<template>
  <div class="home-page">
    <div class="home-head">
      <head-nav :menuList="menuList" @changeKey="changeKey"></head-nav>
    </div>
    <div class="home-body">
      <div class="home-container">
       <IndexBg :menuList="menuList" :activeKey="activeKey" :activeMenuList="activeMenuList"></IndexBg>
      </div>
    </div>
  </div>
</template>

<script>
import HeadNav from './components/HeadNav.vue'
import IndexBg from './components/IndexBg.vue'
import { userMenuAuth } from "@/api/account";

export default {
  data() {
    return {
      menuList: [],
      activeKey:0,
      activeMenuList:[]


    }
  },
  components: {
    HeadNav,IndexBg
  },
  mounted(){
    this.getMenuList()
  },
  methods:{
    async getMenuList() {
      let res = await userMenuAuth({ remark: "pvg_vehicle" });
      this.menuList = res.data;
      this.activeMenuList = res.data
     
    },
    changeKey(key){
      this.activeKey = key
      this.activeMenuList = this.menuList[key].children

    }
  }
}
</script>
<style lang="less" scoped>
.home-page {
  display: flex;
  height: 100vh;
  flex-direction: column;
}
.home-head {
  width: 100%;
  background: #000000;
}
.home-body {
  // background: lightyellow;
  width: 100% ;
  flex: 1;
  height: calc(100% -60px);
  .home-container{
    height: 100%;
    width: 100%;
  }
}
</style>
